<template>
    <div class="address">
        <!-- header -->
        <mt-header title="选择收货地址">
            <router-link to="/home" slot="left">
                <mt-button icon="back"></mt-button>
            </router-link>
        </mt-header>
        <!-- search -->
        <div class="searchBox">
            <input type="search" class="search" placeholder="输入城市名或者拼音" v-model="keyword">
        </div>
        <!-- list -->
        <div class="cityNow" v-if="isShow">
            <p>当前定位城市</p>
            <div>{{cityNow}}</div>
        </div>
        <mt-index-list>
            <mt-index-section :index="key" v-for="(value, key) in obj" :key="key">
                <mt-cell :title="item.city" v-for="item in value" :key="item.id" @click.native="checked(item.city)"></mt-cell>
            </mt-index-section>
        </mt-index-list>
    </div>
</template>

<script>
export default {
    data() {
        return {
            obj: {
                A: [{
                    id: 1,
                    city: '阿坝县'
                }, {
                    id: 2,
                    city: '阿巴嘎旗'
                }, {
                    id: 3,
                    city: '阿坝藏族羌族自治州'
                }],
                B: [{
                    id: 4,
                    city: '巴楚县'
                }, {
                    id: 5,
                    city: '巴东县'
                }, {
                    id: 6,
                    city: '白城市'
                }],
                C: [{
                    id: '7',
                    city: '苍南县'
                }, {
                    id: '8',
                    city: '苍梧县'
                }, {
                    id: '9',
                    city: '苍溪县'
                }],
                Z: [{
                    id: 10,
                    city: '杂多县'
                }, {
                    id: 11,
                    city: '赞皇县'
                }, {
                    id: 12,
                    city: '枣强县'
                }]
            },
            keyword: '',
            isShow: false,
            cityNow: '长沙'
        }
    },
    methods: {
        checked(city) {
            this.isShow = true;
            this.cityNow = city;
            this.$store.state.address = city
        }
    },
}
</script>


<style scoped>
    /* container */
    .address {
        margin-top: 44px;
        margin-bottom: 55px;
    }
    /* header */
    .mint-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 44px;
        z-index: 99;
        font-size: 18px;
    }
    /* search */
    .searchBox {
        height: 44px;
        padding: 7px 22px;
        background: #26a2ff;
    }
    .search {
        padding: 0;
        height: 100%;
        background: #fff;
        border-radius: 22px;
        color: #333;
        font-size: 12px;
    }
    .cityNow {
        font-size: 14px;
    }
    .cityNow p {
        padding: 14px 0 7px 15px;
        margin: 0;
        color: #666;
        background: #f5f5f5;
        border-bottom: 1px solid #ddd;
    }
    .cityNow div {
        padding-left: 15px;
        line-height: 50px;
        background: #fff;
    }
</style>
